<template>
	<div class="tabs">
		<template v-for="(item, index) in tabs" :key="index">
			<div class="tabs-item" :class="{ 'is-actived': currentValue == index }" @click.stop="currentValue = index">
				<div class="content s-center flex">
					<slot name="content" :item="item">
						<div class="content-icon">
							<img v-show="currentValue == index" :src="getImgUrl(`../assets/img/rd/${item.img}-light.png`)" alt="" />
							<img v-show="currentValue != index" :src="getImgUrl(`../assets/img/rd/${item.img}.png`)" alt="" />
						</div>
						<div class="content-title m-l-10">
							<div>{{ item.name }}</div>
							<div style="font-size: 12px">{{ item.subname }}</div>
						</div>
					</slot>
				</div>
			</div>
		</template>
	</div>
</template>

<script setup name="myTabs">
// 右侧侧边栏
const emits = defineEmits(['update:modelValue', 'change']),
	/***
	 * 参数属性
	 * @property {Number} modelValue 默认值
	 * @property {[{}]} tabs 列表数据
	 */
	props = defineProps({
		modelValue: null,
		tabs: {
			type: Array,
			default: () => [
				{ name: '智能综采', subname: 'Fully mechanized', img: 'tab-1' },
				{ name: '智能掘进', subname: 'Intelligent driving', img: 'tab-2' },
				{ name: '主煤流运输', subname: 'transport', img: 'tab-3' },
				{ name: '通风', subname: 'ventilation', img: 'tab-4' },
				{ name: '压风机', subname: 'Pressure blower', img: 'tab-5' },
				{ name: '瓦斯抽放', subname: 'Gas drainage', img: 'tab-6' },
				{ name: '电力', subname: 'Electric power', img: 'tab-7' },
				{ name: '排水', subname: 'drainage', img: 'tab-8' }
			]
		}
	})

const currentValue = computed({
	get() {
		return props.modelValue
	},
	set(val) {
		emits('update:modelValue', val)
		emits('change', val)
	}
})
</script>

<style lang="scss" scoped>
.tabs {
	margin-right: -30px;
	pointer-events: auto;
	&-item {
		color: #424c67;
		font-size: 14px;
		font-weight: bold;
		width: 240px;
		background-color: #10102b;
		margin-bottom: 10px;
		padding: 10px 0 10px 0px;
		border: 2px solid #424c67;
		border-radius: 30px 0 0 30px;
		box-sizing: border-box;
		transition: margin-left 0.5s;
		cursor: pointer;
		.content {
			margin-left: 20px;
		}
	}
	.is-actived {
		border: 2px solid #c2deff;
		box-shadow: inset 0px 0px 3px 2px rgba(10, 153, 255, 0.7), inset 0px 0px 12px 0px #4faaff;
		margin-left: -30px;
		.content-title {
			background: linear-gradient(180deg, #ffffff 13%, #3b81eb 119%);
			-webkit-background-clip: text;
			-webkit-text-fill-color: transparent;
			background-clip: text;
			text-fill-color: transparent;
			text-shadow: 0px 1px 1px 0px #04122a;
		}
	}
}
</style>
